<template>
  <div class="home-header">
    <div class="header-left">
      <a href="#" class="logo"><span>VUE</span>&nbsp;<b>ZB</b></a>
      <div class="header-item btn-collapse" @click="collapseChange"><i class="el-icon-s-operation"></i></div>
    </div>
    <div class="header-right">
      <div class="header-item btn-bell">
        <i class="el-icon-bell"></i>
        <!--<span class="btn-bell-badge" v-if="message"></span>-->
      </div>
      <div class="header-item user-img">
        <img :src="defaultAvatar" />
      </div>
      <div class="header-item user-info">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            <span >{{ initUserName }}</span>
            <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="userInfo">用户信息</el-dropdown-item>
            <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <dialog-change-pass ref="dialogChangePass"></dialog-change-pass>
    <dialog-user-info ref="dialogUserInfo" @refreshData="refreshInfo"></dialog-user-info>
  </div>

</template>

<script>
import bus from '@/utils/bus'
import { logout } from '@/utils'
import changePassDialog from './dialog/changePassword.vue'
import userInfoDialog from './dialog/userInfo.vue'

export default {
  data(){
    return {
      collapse: false,
      userInfo: this.$store.state.user.userInfo,
      defaultName: 'bangZZ',
      defaultAvatar: '/static/images/default-avatar.jpeg'
    }
  },
  computed: {
    initUserName: function() {
      return this.userInfo.alias ? this.userInfo.alias : this.defaultName;
    },
    initUserAvatar: function () {
      return this.userInfo.avatar ? this.userInfo.avatar : this.defaultAvatar;
    }
  },
  methods: {
    // 用户名下拉菜单选择事件
    handleCommand: function(command){
      if ('updatePassword' === command) {
        this.$nextTick(() => {
          this.$refs['dialogChangePass'].init()
        })
      } else if ('userInfo' === command) {
        this.$nextTick(() => {
          this.$refs['dialogUserInfo'].init()
        })
      } else if ('logout' == command) {
        logout()
        this.$router.push('/login');
        location.reload()
      }
    },
    // 侧边栏折叠
    collapseChange: function () {
      this.collapse = !this.collapse;
      bus.$emit("collapse", this.collapse);
    },
    refreshInfo(data) {
      this.userInfo.alias = data

    }
  },
  components: {
    'dialog-change-pass' : changePassDialog,
    'dialog-user-info' : userInfoDialog
  }
}
</script>

<style>
  .home-header {
    box-sizing: border-box;
    width: 100%;
    min-width: 1024px;
    font-size: 22px;
    color: #fff;
  }
  .header-left{
    float: left;
  }
  .home-header .logo{
    float: left;
    width: 230px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  }

  .header-right{
    float: right;
    margin: 0px 20px;
  }
  .header-item{
    float: left;
    line-height: 40px;
    padding: 0px 15px;
    cursor: pointer;
  }
  .user-img{
    cursor: default;
  }
  .user-img img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .user-info .el-dropdown-link {
    color: #ffffff;
    cursor: pointer;
  }

</style>

